// out: ./index.wxss, compress: true, sourceMap: false
.page{
    padding-bottom: 50rpx;
}
.mask{
    position: fixed;
    top: 200rpx;
    bottom: 0;
    left: 0;
    right: 0;
    background:rgba(0,0,0,0.3);
    z-index: 999;
    .fix-tab{
        position: absolute;
        top: 0;
        width: 750rpx;
        z-index: 99999;
        .item{
            height: 60rpx;
            line-height: 60rpx;
            font-size:24rpx;
            background:rgba(210,219,232,1);
            color:rgba(0,0,0,1);
            text-align: center;
            border-bottom:2rpx solid #fff;
            &:last-child{
                border-bottom:0;
            }
        }
    }
}
.home-body{
    &.fixed{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden;
    }
}
.top{
    position: relative;
    padding: 0 40rpx;
    // background-color: #4E6D95;
    .bg-img{
        position: absolute;
        top: 0;
        left: 0;
        width: 750rpx;
        height: 472rpx;
        z-index: -1;
    }
    .title{
        font-size:48rpx;
        font-family:PingFang-SC-Heavy;
        font-weight:800;
        color:rgba(255,255,255,1);
        padding: 20rpx 0;
    }
    .change-title{
        position: relative;
        padding: 26rpx 0;
        border-top:1px solid rgba(255,255,255,0.5);
        .company-icon{
            width: 36rpx;
            height: 32rpx;
            vertical-align: middle;
        }
        .change-icon{
            float: right;
            padding: 10rpx;
            margin-top: -10rpx;
            &>image{
                width: 30rpx;
                height: 22rpx;
                vertical-align: middle;
            }
        }
        .name{
            padding-left: 17rpx;
            font-size:30rpx;
            font-weight:500;
            color:#fff;
        }
        
    }
    .top-tab{
        position: relative;
        display: flex;
        background-color: #869CB8;
        height:65rpx;
        // background-color:#fff;
        border-radius:33rpx;
        margin-bottom: 16rpx;
        z-index: 3;
        .active-view{
            position: absolute;
            top: 0;
            left: 0;
            width: 33.3%;
            height:65rpx;
            background-color:#fff;
            border-radius:33rpx;
            z-index: 1;
            transition: all .25s;
        }
        .tab-item{
            position: relative;
            height:65rpx;
            line-height: 65rpx;
            flex: 1;
            text-align: center;
            font-size:32rpx;
            font-weight:500;
            color:rgba(246,248,254,1);
            z-index: 2;
            &.active{
                // background-color:#fff;
                // border-radius:33rpx;
                color:rgba(62,90,127,1);
            }
        }
    }
    .top-time-search{
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
        .time-group{
            position: relative;
            display: flex;
            justify-content: space-between;
            flex:auto;
            .circle-right-icon{
                position: absolute;
                top: 15rpx;
                left: 50%;
                margin-left: -25rpx;
                width: 50rpx;
                height: 50rpx;
            }
            .time-box{
                width: 288rpx;
                height: 80rpx;
                background-color: #fff;
                padding: 16rpx 39rpx;
                border-radius:10rpx;
                text-align: left;
                &.end-time{
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }
                .label{
                    font-size:18rpx;
                    font-weight:500;
                    color:rgba(134,150,163,1);
                }
                .value{
                    font-size:24rpx;
                    font-weight:500;
                    color:rgba(62,90,127,1);
                    .arrow-sm-dwon{
                        width: 20rpx;
                        height: 11rpx;
                    }
                }
            }
        }
        .search-btn{
            width: 80rpx;
            height: 80rpx;
            background:rgba(62,90,127,1);
            border-radius:0px 10rpx 10rpx 0px;
            text-align: center;
            line-height: 80rpx;
            font-size:24rpx;
            color:#fff;
        }
    }
}


.card{
    width:670rpx;
    margin: 0 auto;
    background:#fff;
    box-shadow:0px 8rpx 20rpx 0rpx rgba(62,90,127,0.1);
    border-radius:10rpx;
    margin-top: 16rpx;
}

.first-box{
    display: flex;
    flex-wrap: wrap;
    padding: 15rpx 60rpx;
    .view-item{
        position: relative;
        width: 50%;
        flex-shrink: 0;
        padding: 40rpx 0;
        height: 300rpx;
        // margin-bottom: 20rpx;
        .b-line,.r-line{
            position: absolute;
            background:rgba(240,242,248,1); 
        }
        .b-line{
            width:200rpx;
            height:2rpx;
            left: 0;
            bottom: 0;
        }
        .r-line{
            width:2rpx;
            height:200rpx;
            top: 40rpx;
            right: 0;
        }
        &:nth-child(odd){
            padding-right: 33rpx;
        }
        &:nth-child(even){
            padding-left: 33rpx;
            .b-line{
                left: 40rpx;
            }
        }
        .view-top-head{
            display: flex;
            justify-content: space-between;
            .title{
                flex-shrink: 0;
                font-size:28rpx;
                font-weight:500;
                color:rgba(134,150,163,1);
            }
            .percent-wrapper{
                position: relative;
                margin-bottom: 20rpx;
                .percent-values{
                    position: absolute;
                    padding: 30rpx 0;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    text-align: center;
                    .weight-num{
                        font-size:24rpx;
                        font-weight:500;
                        color:rgba(62,90,127,1);
                        opacity: 1;
                    }
                    .weak-num{
                        font-size:24rpx;
                        font-weight:500;
                        color:rgba(62,90,127,1);
                        opacity:0.3;
                    }
                }
            }
        }
       
        .big-num{
            font-size:70rpx;
            font-weight:500;
            color:rgba(62,90,127,1);
        }
        .value-row{
            display: flex;
            justify-content: space-between;
            .label{
                font-size:22rpx;
                font-weight:500;
                color:rgba(134,150,163,1);
            }
            .value{
                position: relative;
                padding-left: 18rpx;
                width: 150rpx;
                text-align: left;
                font-size:22rpx;
                font-weight:500;
                color:rgba(107,115,136,1);
                .triangle-up,.triangle-down{
                    position: absolute;
                    top: 50%;
                    margin-top: -8rpx;
                    left: 0;
                    display: inline-block;
                    width: 0;
                    height: 0;
                    border-left: 8rpx solid transparent;
                    border-right: 8rpx solid transparent;
                }
                .triangle-up{
                    border-bottom:16rpx solid #71C10A;
                }
                .triangle-down{
                    border-top:16rpx solid #FF8182;
                }
            }
        }
    }
}
.list-card{
    display: flex;
    padding: 25rpx 30rpx;
    justify-content: space-between;
    .info-img{
        width: 68rpx;
        height: 68rpx;
    }
    .info-right{
        flex: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title{
            max-width: 310rpx;
            font-size:30rpx;
            font-weight:500;
            color:rgba(134,150,163,1);
            margin-left: 42rpx;
        }
        .more-info{
            text-align: center;
            .value{
                font-size:30rpx;
                color:rgba(62,90,127,1);
                margin-bottom: 6rpx;
            }
            .label{
                font-size:22rpx;
                color:rgba(62,90,127,1);
            }
        }
    }
}

.money-card{
    padding: 0 31rpx;
    .title{
        padding: 30rpx 0;
        font-size:40rpx;
        font-weight:800;
        color:#3E5A7F;
        .title-value{
            font-weight: 500;
        }
    }
    .sm-title{
        font-size:32rpx;
        font-weight:500;
        color:#3E5A7F;
    }
    .money-table{
        border: 1rpx solid rgba(238,238,238,1);
        margin-bottom: 31rpx;
        .money-row{
            display: flex;
            border-bottom: 1rpx solid rgba(238,238,238,1);
            &:last-child{
                border-bottom: 0;
            }
            &:nth-child(odd){
                background-color: #F4F5FA;
            }
            .money-cell{
                flex: 1;
                padding: 13rpx 0;
                text-align: center;
                font-size:24rpx;
                &:first-child{
                    border-right: 1rpx solid rgba(238,238,238,1);
                }
                &.label{
                    font-weight:400;
                    color:rgba(134,150,163,1);
                }
                &.value{
                    font-weight:500;
                    color:rgba(62,90,127,1);
                }
            }
        }
    }
}